import React, { memo } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux"
import { NavLink } from "react-router-dom";
import { headerLinks } from "@/services/local-data"
import { changeIsShow } from "../login/store/actionCreators"

import { Input } from "antd"

import { AppHeaderWrapper, HeadLeft, HeadRight } from './style'

import { SearchOutlined } from '@ant-design/icons';
import GHLogin from "@/components/login"

export default memo(function GHAppHeader() {
  console.log('重新渲染，重新渲染');
  const dispatch = useDispatch()
  const showItem = (item, index) => {
    if (index < 3) {
      return (
        <NavLink to={item.link}>
          {item.title}
          <i className="sprite_01 icon"></i>
        </NavLink>
      )
    } else {
      return <a href={item.link} target="_blank" rel="noopener noreferrer">{item.title}</a>
    }
  }

  const { isShow, isLogin, detail } = useSelector(state => {
    return {
      isShow: state.getIn(['login', 'isShow']),
      isLogin: state.getIn(['login', 'isLogin']),
      detail: state.getIn(['login', 'detail']),
    }
  }, shallowEqual)

  console.log(isShow, 'isShow', isLogin, 'isLogin', detail, 'userDetail');
  const handleLogin = () => {
    dispatch(changeIsShow())
  }
  return (
    <AppHeaderWrapper>
      <div className="wrap-v1 content">
        <HeadLeft>
          <a className="logo sprite_01" href="#/">网易云音乐</a>
          <div className="select-list">
            {
              headerLinks.map((item, index) => {
                return (
                  <div key={item.title} className="select-item">
                    {showItem(item, index)}
                  </div>
                )
              })
            }
          </div>
        </HeadLeft>
        <HeadRight>
          <Input className="search" placeholder="音乐/视频/电台/用户" prefix={<SearchOutlined />}></Input>
          <div className="center">创作者中心</div>
          {isLogin ? <img className="img" src={detail?.profile?.avatarUrl}></img> : <div className="login" onClick={_ => handleLogin()}>登录</div>}
          {
            isShow && <GHLogin />
          }
        </HeadRight>
      </div>
      <div className="divider"></div>
    </AppHeaderWrapper>

  )
})